docs(ui): add dark theme for storybook docs by cylewaitforit · Pull Request #2062 · npmx-dev/npmx.dev

cylewaitforit · 2026-03-13T14:12:57Z

🔗 Linked issue

Related: #1964

🧭 Context

This adds the dark theme to the docs pages in the npmx storybook.

Note

Because there are not any component docs pages in the storybook currently, to view the canvas change with the theme selection, check the preview of #1964 where autodocs have been turned on for button stories.
https://698b88d5157d89f1f33a6c21-ieffcbxthf.chromatic.com/?path=/docs/components-button-buttonbase--docs

📚 Description

This allows the docs to be viewed with the default npmx theme and retains the theme switcher capabilities for the story canvas portion of the docs.

vercel · 2026-03-13T14:13:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 18, 2026 10:18pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 18, 2026 10:18pm
npmx-lunaria	Ignored		Mar 18, 2026 10:18pm

codecov · 2026-03-13T14:15:11Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-13T14:22:37Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 782a4824-90ea-4680-9e5a-460a608d9c42

📥 Commits

Reviewing files that changed from the base of the PR and between d45844a and 0d6dd3d.

📒 Files selected for processing (2)

.storybook/manager.ts
.storybook/storybook-welcome.mdx

🚧 Files skipped from review as they are similar to previous changes (1)

.storybook/storybook-welcome.mdx

📝 Walkthrough

Walkthrough

Replaces an in-file Storybook theme with a new module .storybook/theme.ts exporting npmxDark and wires it into manager and preview configs. Adds logic in manager.ts to hide the toolbar for stories tagged hide-toolbar when viewing docs. Adds .storybook/preview-head.html to set the docs-story canvas background via a CSS variable. Adds an MDX welcome page and updates the stories glob in main.ts to include .storybook/*.mdx. No exported API signatures were changed.

Possibly related PRs

docs(ui): add storybook theme addon #1713: Modifies Storybook theming/configuration files (preview/main) and how themes are applied — strong overlap in theme/config changes.
feat: add storybook #1270: Updates Storybook preview/main setup and theme wiring; shares code-level overlap with the preview and main configuration edits.

Suggested reviewers

danielroe
JReinhold

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the addition of dark theme to Storybook docs pages and referencing the related issue `#1964`.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

Migrating from UI to YAML configuration.

Use the @coderabbitai configuration command in a PR comment to get a dump of all your UI settings in YAML format. You can then edit this YAML file and upload it to the root of your repository to configure CodeRabbit programmatically.

alexdln · 2026-03-17T22:54:03Z

@cylewaitforit theme switcher doesn't work on the welcome page :(
Can you check please? It seems that for some reason data-theme attr is not applied there

In other parts lgtm

cylewaitforit · 2026-03-18T22:31:38Z

@cylewaitforit theme switcher doesn't work on the welcome page :( Can you check please? It seems that for some reason data-theme attr is not applied there

In other parts lgtm

@alexdln Good point, that could be pretty confusing. So definitely worth addressing.

The theme switcher switches the theme for the story previews not for the "story manager". So on the welcome doc page it had nothing to switch because it isn't displaying any stories.

While I'd love to get an npmxLight theme for the storybook manager as well, I haven't figured out yet how storybook can switch between those.

What I did figure out was a way to say with tags that a particular docs page doesn't need to show the toolbar. 0d6dd3d

Let me know if that seems like a viable solution for now.

ghostdevv

actually, I think @alexdln's comments have been addressed so will merge - we can do a follow up if I missed anything 🙏

This reverts commit fea4400.

ghostdevv · 2026-03-20T08:49:08Z

Ah this has broken CI, I'm not sure why yet as the CI passed when I merged this - to get things moving again I've opened #2167 and unless anyone happens to know before that is merged then we can revert the change and then @cylewaitforit can re-create this PR and we can try and figure out the problem

…2167)

cylewaitforit · 2026-03-20T12:39:51Z

@ghostdevv I don’t believe it was this theme PR that is affecting CI.

I think it looks like #2149 was merged before the new Visual Regression test for the story was accepted in chromatic’s visial regression suite.

cylewaitforit · 2026-03-20T17:37:57Z

@ghostdevv I don’t believe it was this theme PR that is affecting CI.

I think it looks like #2149 was merged before the new Visual Regression test for the story was accepted in chromatic’s visual regression suite.

Turns out it was both things, but this one was more blocking than the About page thing.

Thanks @ghostdevv for the quick revert to get things back to a more stable state.

docs(ui): add dark theme for storybook docs

c0362bd

vercel bot deployed to Preview – npmx.dev March 13, 2026 14:15 View deployment

cylewaitforit marked this pull request as ready for review March 13, 2026 14:18

cylewaitforit mentioned this pull request Mar 17, 2026

docs(ui): add ButtonGroup stories to storybook #1964

Merged

docs(ui): add storybook welcome page

d45844a

vercel bot deployed to Preview – npmx.dev March 17, 2026 22:10 View deployment

fix: hide toolbar on storybook welcome doc page

0d6dd3d

vercel bot deployed to Preview – npmx.dev March 18, 2026 22:18 View deployment

ghostdevv requested a review from alexdln March 20, 2026 06:50

ghostdevv approved these changes Mar 20, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Mar 20, 2026

Merged via the queue into npmx-dev:main with commit fea4400 Mar 20, 2026
20 checks passed

github-actions bot mentioned this pull request Mar 20, 2026

chore: release v0.5.0 #2096

Open

ghostdevv added a commit that referenced this pull request Mar 20, 2026

Revert "docs(ui): add dark theme for storybook docs (#2062)"

34937f3

This reverts commit fea4400.

ghostdevv added a commit that referenced this pull request Mar 20, 2026

Revert "docs(ui): add dark theme for storybook docs (#2062)"

c871aac

This reverts commit fea4400.

coderabbitai bot mentioned this pull request Mar 20, 2026

chore: revert "docs(ui): add dark theme for storybook docs (#2062)" #2167

Merged

github-merge-queue bot pushed a commit that referenced this pull request Mar 20, 2026

chore: revert "docs(ui): add dark theme for storybook docs (#2062)" (#…

9ae5629

…2167)

coderabbitai bot mentioned this pull request Mar 20, 2026

docs(ui): use storybook-i18n addon for locale switching #2125

Merged

cylewaitforit mentioned this pull request Mar 20, 2026

docs(ui): add dark theme for storybook docs v2 #2172

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs(ui): add dark theme for storybook docs#2062

docs(ui): add dark theme for storybook docs#2062
ghostdevv merged 3 commits intonpmx-dev:mainfrom
cylewaitforit:sb-add-docs-darktheme

cylewaitforit commented Mar 13, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 13, 2026

Uh oh!

coderabbitai bot commented Mar 13, 2026 •

edited

Loading

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

alexdln commented Mar 17, 2026

Uh oh!

cylewaitforit commented Mar 18, 2026

Uh oh!

ghostdevv left a comment

Uh oh!

Uh oh!

ghostdevv commented Mar 20, 2026

Uh oh!

cylewaitforit commented Mar 20, 2026

Uh oh!

cylewaitforit commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

cylewaitforit commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 13, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

alexdln commented Mar 17, 2026

Uh oh!

cylewaitforit commented Mar 18, 2026

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostdevv commented Mar 20, 2026

Uh oh!

cylewaitforit commented Mar 20, 2026

Uh oh!

cylewaitforit commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cylewaitforit commented Mar 13, 2026 •

edited

Loading

vercel bot commented Mar 13, 2026 •

edited

Loading

coderabbitai bot commented Mar 13, 2026 •

edited

Loading